<template>
  <div class="phoneBillRechargeHome">
    <c-title :hide="false" text="话费充值"></c-title>
    <div class="topbox">
      <div class="img">
        <img :src="member.avatar_image" alt="" />
      </div>
      <div class="name">{{ member.nickname }}</div>
    </div>
    <div class="list">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="phoneNumber">{{ item.mobile }}</div>
        <div class="line"></div>
        <div class="btn">
          <div class="btn_box" @click="detailShowTap(item.card_package.product_id, item.mobile)" v-if="item.card_package && item.type == 1">
            <i class="iconfont icon-wodedingdan0101"></i>
            <div class="name">套餐详情</div>
          </div>
          <div class="btn_box" v-if="item.type == 2" @click="taoEditPhone(item)">
            <i class="iconfont icon-fontclass-bianji"></i>
            <div class="name">编辑</div>
          </div>
          <div class="btn_box" v-if="item.type == 2" @click="deletBtn(item)">
            <i class="iconfont icon-ht_operation_delete"></i>
            <div class="name">删除</div>
          </div>
          <div class="btn_box" @click="rechargeBtn">
            <i class="iconfont icon-tixian"></i>
            <div class="name">充值</div>
          </div>
        </div>
      </div>
    </div>
    <div class="posbtn set-pc-style">
      <div class="btn" @click="phone_newTap">新增手机号</div>
    </div>
    <van-popup v-model="show" position="bottom" round :style="{ height: '30%' }" :close-on-click-overlay="false">
      <van-nav-bar title="新增手机号" @click-left="onClickLeft" @click-right="onClickRight_new">
        <div slot="left" style="color: #aaaab3">取消</div>
        <div slot="right">确定</div>
      </van-nav-bar>
      <div class="cellBox">
        <van-field v-model="mobile" type="tel" label="手机号" placeholder="请输入手机号" />
      </div>
    </van-popup>
    <van-popup v-model="editshow" position="bottom" round :style="{ height: '30%' }" :close-on-click-overlay="false">
      <van-nav-bar title="编辑手机号" @click-left="onClickLeft" @click-right="onClickRight">
        <div slot="left" style="color: #aaaab3">取消</div>
        <div slot="right">确定</div>
      </van-nav-bar>
      <div class="cellBox">
        <van-field v-model="mobile" type="tel" label="手机号" placeholder="请输入手机号" />
      </div>
    </van-popup>

    <van-popup v-model="detailShow" closeable position="bottom" round :style="{ height: '65%' }" :close-on-click-overlay="false">
      <div class="detailBox">
        <div class="top_title">套餐详情</div>
        <div class="detail">
          <div class="line" v-if="detailInfo.package">
            <div class="line_l">套餐名称:</div>
            <div class="line_r">{{ detailInfo.package.product_name }}</div>
          </div>
          <div class="line" v-if="detailInfo.package">
            <div class="line_l">套餐月租:</div>
            <div class="line_r">{{ detailInfo.package.monthly_rent }}元/月</div>
          </div>
          <div class="line" v-if="detailInfo.package">
            <div class="line_l">返还余额:</div>
            <div class="line_r">{{ detailInfo.package.return_monthly }}</div>
          </div>
          <div class="line" v-if="detailInfo.package">
            <div class="line_l">返还时间:</div>
            <div class="line_r">{{ detailInfo.package.return_msg }}</div>
          </div>
        </div>
        <div class="recordBox" v-if="detailInfo">
          <div class="record">
            <div class="record_t">累计充值金额</div>
            <div class="record_c">{{ detailInfo.cumulative_recharge_amount }}</div>
            <div class="record_b" @click="toIndex('', 2)">
              查看明细
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="record">
            <div class="record_t">充值期数</div>
            <div class="record_c">{{ detailInfo.return_periods }}</div>
          </div>
          <div class="record">
            <div class="record_t">已充值的期数</div>
            <div class="record_c">{{ detailInfo.already_return_period }}</div>
            <div class="record_b" @click="toIndex(detailInfo.return_balance_id, 2)">
              查看明细
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="record">
            <div class="record_t">剩余未充值期数</div>
            <div class="record_c">{{ detailInfo.surplus_return_period }}</div>
            <div class="record_b" @click="toUrl(detailInfo.return_balance_id, '0')">
              查看明细
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="record">
            <div class="record_t">累计已返佣金</div>
            <div class="record_c">{{ detailInfo.return_amount }}</div>
            <div class="record_b" @click="toUrl(detailInfo.return_balance_id, '1')">
              查看明细
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="record">
            <div class="record_t">剩余未返佣金</div>
            <div class="record_c">{{ detailInfo.un_return_amount }}</div>
            <div class="record_b" @click="toUrl(detailInfo.return_balance_id, '2')">
              查看明细
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      show: false,
      mobile: "",
      Editid: "",
      detailShow: false,
      editshow: false,
      detailInfo: [],
      list: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      recharge_url: "",
      member: []
    };
  },
  activated() {
    this.fun.setWXTitle('话费充值');
    this.init();
    this.getData();
  },
  methods: {
    getMoreData(){
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http.post("plugin.phone-bill-recharge.frontend.member-phone.index", {page:this.page}, "加载中").then(
          res => {
            this.isLoadMore = true;
            if (res.result === 1) {
              this.list = this.list.concat(res.data.records.data); //数组拼接
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          },
          function (response) {
            console.log("response", response);
            // error callback
          }
        );
      }
    },
    init() {
      this.page = 0;
      this.detailShow = false;
      this.list = [];
      this.total_page = 0;
      this.isLoadMore = true;
      this.detailShow = false;
      this.editshow = false;
      this.Editid = "";
    },
    toIndex(product_id) {
      if (product_id) {
        this.$router.push(this.fun.getUrl("phoneBillRecharge", { status: 2, rid: product_id }));
      } else {
        this.$router.push(this.fun.getUrl("phoneBillRecharge", { status: 2 }));
      }
    },
    toUrl(item, key) {
      this.$router.push(this.fun.getUrl("phoneBillRechargeRecord", { id: item, ind: key }));
    },
    onClickLeft() {
      this.show = false;
      this.Editid = "";
      this.mobile = "";
      this.editshow = false;
    },
    onClickRight() {
      if (!this.mobile) {
        this.$toast("请填写编辑的手机号码");
        return;
      }
      $http.get("plugin.phone-bill-recharge.frontend.member-phone.update", { mobile: this.mobile, id: this.Editid }, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.$toast(response.msg);
            this.editshow = false;
            this.Editid = "";
            this.mobile = "";
            this.getData();
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    deletBtn(item) {
      $http.get("plugin.phone-bill-recharge.frontend.member-phone.unbind", { mobile: item.mobile }, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.$toast(response.msg);
            this.getData();
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    taoEditPhone(item) {
      this.mobile = item.mobile;
      this.Editid = item.id;
      console.log(this.mobile, this.Editid);
      this.editshow = true;
    },
    phone_newTap() {
      this.show = true;
    },
    onClickRight_new() {
      if (!this.mobile) {
        this.$toast("请填写新增的手机号码");
        return;
      }
      $http.get("plugin.phone-bill-recharge.frontend.member-phone.bind", { mobile: this.mobile }, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.$toast(response.msg);
            this.show = false;
            this.getData();
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    rechargeBtn() {
      this.$router.push(this.fun.getUrl("recharge_phone_bill", { status: "recharge_phone_bill", url: this.recharge_url }));
    },
    getData() {
      $http.get("plugin.phone-bill-recharge.frontend.member-phone.index", {}, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.list = response.data.records.data;
            this.total_page = response.data.records.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.recharge_url = response.data.recharge_url;
            this.member = response.data.member;
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    detailShowTap(pid, mobile) {
      $http.get("plugin.phone-bill-recharge.frontend.member-phone.package-detail", { product_id: pid, mobile: mobile }, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.detailShow = true;
            this.detailInfo = response.data;
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.phoneBillRechargeHome {
  min-height: 100vh;
  background: #ffffff;
}
.detailBox {
  .top_title {
    font-size: 0.94rem;
    font-weight: 400;
    margin: 1.5rem 1.25rem;
  }
  .recordBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .record {
      margin-bottom: 1.25rem;
      width: 33%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .record_t {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
      }
      .record_c {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
      }
      .record_b {
        display: flex;
        align-items: center;
        color: #ff8924;
        font-size: 0.75rem;
      }
    }
  }
  .detail {
    margin: 0 0.94rem;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .line {
      flex: 1;
      display: flex;
      justify-content: center;
      font-size: 0.88rem;
      color: #6e6e79;
      margin-bottom: 0.75rem;
      .line_l {
        margin-right: 0.75rem;
      }
      .line_r {
        color: #282828;
      }
    }
  }
}
.cellBox {
  margin-top: 2rem;
}
.posbtn {
  position: fixed;
  bottom: 1.34rem;
  left: 0;
  width: 100%;
  .btn {
    margin: 0 0.75rem;
    border-radius: 1.28rem;
    height: 2.5rem;
    background: #ff8924;
    line-height: 2.5rem;
    text-align: center;
    color: #ffffff;
    font-size: 0.88rem;
  }
}
.list {
  margin: 0.63rem 0.75rem;
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .lis {
    padding: 0.75rem;
    box-sizing: border-box;
    margin-bottom: 0.63rem;
    .phoneNumber {
      font-size: 1rem;
      text-align: left;
    }
    .line {
      margin-top: 0.75rem;
      width: 100%;
      height: 1px;
      background: #f2f2f2;
    }
    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.75rem;
      color: #6e6e79;
      font-size: 0.88rem;
      .btn_box {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #F2F2F2 ;
        .iconfont {
          margin-right: 0.25rem;
        }
      }
      .btn_box:last-child{
        border-right: 0px;
      }
    }
  }
}
.topbox {
  height: 7.38rem;
  width: 100%;
  padding-left: 0.75rem;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #ff8924;
  .img {
    width: 3.44rem;
    height: 3.44rem;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .name {
    font-size: 1rem;
    color: #ffffff;
    margin-left: 0.41rem;
  }
}
</style>
